<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>培训学习 - 护工助手</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/training.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3159099_1wqzwg0e9ck.css">
</head>
<body>
    <div class="app-container">
        <!-- 顶部状态栏 -->
        <header class="app-header">
            <div class="status-bar">
                <span class="time">14:25</span>
                <div class="status-icons">
                    <span class="icon-wifi"></span>
                    <span class="icon-signal"></span>
                    <span class="icon-battery">80%</span>
                </div>
            </div>
            <div class="header-content">
                <h1>培训学习</h1>
                <div class="header-actions">
                    <a href="#" class="icon-search"></a>
                    <a href="#" class="icon-message"></a>
                </div>
            </div>
        </header>

        <!-- 学习进度卡片 -->
        <div class="card learning-progress">
            <div class="progress-header">
                <h2>我的学习</h2>
                <span class="badge">本月已学习 12 小时</span>
            </div>
            <div class="progress-bar-container">
                <div class="progress-bar">
                    <div class="progress-fill" style="width: 65%"></div>
                </div>
                <div class="progress-text">65% 完成</div>
            </div>
            <div class="cert-info">
                <span>已获得证书: 3个</span>
                <a href="certificates.html" class="view-more">查看全部 ></a>
            </div>
        </div>

        <!-- 课程导航 -->
        <div class="course-nav">
            <div class="nav-item active">全部</div>
            <div class="nav-item">基础技能</div>
            <div class="nav-item">专业护理</div>
            <div class="nav-item">心理关怀</div>
            <div class="nav-item">营养膳食</div>
            <div class="nav-item">急救知识</div>
        </div>

        <!-- 继续学习 -->
        <div class="card continue-learning">
            <h2>继续学习</h2>
            <div class="course-card">
                <div class="course-img">
                    <img src="images/course1.jpg" alt="老年人心理健康关怀">
                    <div class="progress-tag">65%</div>
                </div>
                <div class="course-info">
                    <h3>老年人心理健康关怀</h3>
                    <p class="course-desc">了解老年人常见心理问题及应对方法，提升心理关怀能力</p>
                    <div class="course-meta">
                        <span>已学习 1.5 小时</span>
                        <span>共 2.5 小时</span>
                    </div>
                    <button class="btn btn-primary">继续学习</button>
                </div>
            </div>
        </div>

        <!-- 推荐课程 -->
        <div class="card">
            <div class="card-header">
                <h2>推荐课程</h2>
                <a href="#" class="more">查看全部</a>
            </div>
            <div class="course-list">
                <div class="course-item">
                    <div class="course-img">
                        <img src="images/course2.jpg" alt="糖尿病患者护理">
                    </div>
                    <div class="course-brief">
                        <h3>糖尿病患者护理</h3>
                        <div class="course-stats">
                            <span>2.5小时</span>
                            <span>4.9分</span>
                        </div>
                    </div>
                </div>
                <div class="course-item">
                    <div class="course-img">
                        <img src="images/course3.jpg" alt="中风康复护理">
                    </div>
                    <div class="course-brief">
                        <h3>中风康复护理</h3>
                        <div class="course-stats">
                            <span>3小时</span>
                            <span>4.8分</span>
                        </div>
                    </div>
                </div>
                <div class="course-item">
                    <div class="course-img">
                        <img src="images/course4.jpg" alt="老年人跌倒预防">
                    </div>
                    <div class="course-brief">
                        <h3>老年人跌倒预防</h3>
                        <div class="course-stats">
                            <span>1.5小时</span>
                            <span>4.7分</span>
                        </div>
                    </div>
                </div>
                <div class="course-item">
                    <div class="course-img">
                        <img src="images/course5.jpg" alt="老年人营养膳食">
                    </div>
                    <div class="course-brief">
                        <h3>老年人营养膳食</h3>
                        <div class="course-stats">
                            <span>2小时</span>
                            <span>4.9分</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 考试任务 -->
        <div class="card">
            <div class="card-header">
                <h2>考试任务</h2>
                <a href="#" class="more">查看全部</a>
            </div>
            <div class="exam-list">
                <div class="exam-item urgent">
                    <div class="exam-icon">
                        <i class="icon-exam"></i>
                    </div>
                    <div class="exam-info">
                        <h3>老年人心理健康关怀期末考试</h3>
                        <p class="exam-deadline">截止日期: 2023-05-20</p>
                    </div>
                    <div class="exam-status">
                        <span class="badge badge-urgent">紧急</span>
                        <a href="exam.html" class="btn btn-outline">去考试</a>
                    </div>
                </div>
                <div class="exam-item">
                    <div class="exam-icon">
                        <i class="icon-exam"></i>
                    </div>
                    <div class="exam-info">
                        <h3>基础护理技能考核</h3>
                        <p class="exam-deadline">截止日期: 2023-06-15</p>
                    </div>
                    <div class="exam-status">
                        <a href="exam.html" class="btn btn-outline">去考试</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 技能提升 -->
        <div class="card">
            <div class="card-header">
                <h2>技能提升</h2>
                <a href="#" class="more">查看全部</a>
            </div>
            <div class="skill-list">
                <div class="skill-item">
                    <div class="skill-icon">
                        <img src="images/icons/basic-care.png" alt="基础护理">
                    </div>
                    <span class="skill-name">基础护理</span>
                </div>
                <div class="skill-item">
                    <div class="skill-icon">
                        <img src="images/icons/emergency.png" alt="急救技能">
                    </div>
                    <span class="skill-name">急救技能</span>
                </div>
                <div class="skill-item">
                    <div class="skill-icon">
                        <img src="images/icons/psychology.png" alt="心理关怀">
                    </div>
                    <span class="skill-name">心理关怀</span>
                </div>
                <div class="skill-item">
                    <div class="skill-icon">
                        <img src="images/icons/nutrition.png" alt="营养膳食">
                    </div>
                    <span class="skill-name">营养膳食</span>
                </div>
            </div>
        </div>

        <!-- 题库练习 -->
        <div class="card">
            <div class="card-header">
                <h2>题库练习</h2>
                <a href="#" class="more">查看全部</a>
            </div>
            <div class="practice-types">
                <div class="practice-type">
                    <div class="practice-icon">
                        <i class="icon-choice"></i>
                    </div>
                    <span class="practice-name">选择题</span>
                </div>
                <div class="practice-type">
                    <div class="practice-icon">
                        <i class="icon-judge"></i>
                    </div>
                    <span class="practice-name">判断题</span>
                </div>
                <div class="practice-type">
                    <div class="practice-icon">
                        <i class="icon-case"></i>
                    </div>
                    <span class="practice-name">案例分析</span>
                </div>
                <div class="practice-type">
                    <div class="practice-icon">
                        <i class="icon-practice"></i>
                    </div>
                    <span class="practice-name">实操题</span>
                </div>
            </div>
        </div>

        <!-- 学习成就 -->
        <div class="card">
            <div class="card-header">
                <h2>学习成就</h2>
                <a href="#" class="more">查看全部</a>
            </div>
            <div class="achievement-list">
                <div class="achievement-item completed">
                    <div class="achievement-icon">
                        <img src="images/badges/badge1.png" alt="学习达人">
                    </div>
                    <div class="achievement-info">
                        <h3>学习达人</h3>
                        <p>连续学习30天</p>
                    </div>
                    <div class="achievement-progress">
                        <span class="achievement-status">已获得</span>
                    </div>
                </div>
                <div class="achievement-item">
                    <div class="achievement-icon">
                        <img src="images/badges/badge2.png" alt="知识探索者">
                    </div>
                    <div class="achievement-info">
                        <h3>知识探索者</h3>
                        <p>完成10门课程学习</p>
                    </div>
                    <div class="achievement-progress">
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 70%"></div>
                        </div>
                        <span>7/10</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <nav class="bottom-nav">
            <a href="index.html" class="nav-item">
                <i class="nav-icon icon-home"></i>
                <span>首页</span>
            </a>
            <a href="schedule.html" class="nav-item">
                <i class="nav-icon icon-schedule"></i>
                <span>排班</span>
            </a>
            <a href="training.html" class="nav-item active">
                <i class="nav-icon icon-training"></i>
                <span>培训</span>
            </a>
            <a href="profile.html" class="nav-item">
                <i class="nav-icon icon-profile"></i>
                <span>我的</span>
            </a>
        </nav>
    </div>

    <script src="js/common.js"></script>
    <script src="js/training.js"></script>
</body>
</html> 